<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { storeToRefs } from 'pinia'
import useLoginStore from '@/store/user/index.js'

import useApiStore from '@/store/api/index.js'
import { provinceAndCityData } from 'element-china-area-data'
import { OPTIONS_CATEGOEY } from '@/utils/const.js'

const loginStore = useLoginStore()
const apiStore = useApiStore()


//校验表单
const rules = reactive({
  // parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
  // orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '仓库名称不能为空', trigger: 'blur' }]
})

//dialog显示
const dialogVisible = ref(false)

//添加表单
const addForm = reactive({
  id: '',
  name: '',
  remark: '',
  category:'1'
})

//校验规则
const formRef = ref()

//判断操作方法，true新增
const isNewOrUpdate = ref(true)
const isShow = ref(true) //控制上级部门显示
const isNewOrUpdateTitle = ref('添加部门')

//操作信息
const dialogConfirmBtn = async () => {
  addForm.city = addForm.city[1]
  //判断新增还是修改
  //新增，清除组件残留内容，检验表单
  if (isNewOrUpdate.value) {
    await formRef.value.validate()
    //保存信息
    await apiStore.addWarehouseHandler(addForm)
  } else {
    //修改
    if (isNaN(Number(addForm.category)))  delete addForm.category //如果传进来的是汉字，说明是原有的，不需要修改
    await apiStore.editWarehouseHandler(addForm)
  }
  //刷新数据
  await apiStore.getWarehouseAction({ page: apiStore.page.pagenum, size: apiStore.page.size })
  //关闭弹窗
  dialogVisible.value = false
  //清除表单内容
  formRef.value.resetFields()
}

//编辑回显信息
const dialogEditInfoBtn = (data) => {
  //存储主键id
  addForm.id = data.id
  isNewOrUpdateTitle.value = '编辑仓库'
  //调用接口展示角色信息
  Object.assign(addForm, data)
}

//关闭dialog清除信息
const removeDialog = ref(true)
const closeDialogBtn = () => {
  //清除校验信息
  formRef.value.resetFields()
  Object.assign(addForm, {
    id: '',
    deptId: '',
    deptName: '',
    orderNum: '',
    leader: '',
    phone: '',
    email: '',
    status: '0',
    label: '',
    value: '',
    parentId: ''
  })
}

//对外暴露方法
defineExpose({
  dialogVisible,
  dialogConfirmBtn,
  dialogEditInfoBtn,
  isNewOrUpdate,
  removeDialog,
  isShow
})
</script>

<template>
  <div class="dialog">
    <el-dialog
      v-if="removeDialog"
      @close="closeDialogBtn"
      v-model="dialogVisible"
      :title="isNewOrUpdateTitle"
      width="680px"
    >
      <el-form ref="formRef" :rules="rules" :model="addForm">
        <el-form-item label="仓库名称" label-width="80px" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入仓库名称" />
        </el-form-item>

        <el-form-item label="所属地市" label-width="80px">
          <el-cascader size="middium" :options="provinceAndCityData" v-model="addForm.city">
          </el-cascader>
        </el-form-item>
        <el-form-item label="所属项目" label-width="80px">
          <el-input v-model="addForm.proj" placeholder="请输入项目名称，若没有请填写'无'" />
        </el-form-item>
        <el-form-item label="仓库类型" label-width="80px">
          <el-select v-model="addForm.category" placeholder="请选择仓库类型">
            <el-option
              v-for="item in OPTIONS_CATEGOEY"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" label-width="80px" prop="remark">
          <el-input v-model="addForm.remark" placeholder="请输入内容" type="textarea" />
        </el-form-item>
      </el-form>
      <!--      底部-->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="dialogConfirmBtn"> 确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.dialog {
  .el-form {
    margin-top: 30px;
  }

  .el-form-item {
    font-weight: 700;
  }

  /* 去掉长分割线 */

  :deep(.el-tabs__nav-wrap::after) {
    position: static !important;
  }

  /* 去掉下划线 */

  :deep(.el-tabs__active-bar) {
    background-color: transparent !important;
  }

  .el-form-item {
    margin-left: 15px;
    margin-bottom: 20px;
  }
}
</style>
